<template>
    <div class="cell">
        <div class="cell-tool">
            <button @click="init()">初始化</button>
            <!--            <div class="bk-button-group">-->
            <button @click="cellCountFn(1)">1</button>
            <button @click="cellCountFn(4)">4</button>
            <button @click="cellCountFn(9)">9</button>
            <button @click="cellCountFn(16)">16</button>
            <!--            </div>-->
            <botton></botton>
        </div>
        <div class="player">
            <div @click="cellCountFn1( i.data==null?null:i.data )" :class="cellClass(index2)" v-for="(i,index2) in cellCountArr"
                 :key="index2">
                {{ i.data==null?null:i.data  }}
                {{this.showDevice[index2]}}
                <playVideo :str1="index2+1">
                </playVideo>
            </div>
        </div>
    </div>
</template>

<script>
    import playVideo from '../components/playVideo'

    export default {
        name: 'App',
        components: {
            playVideo
        },
        data() {
            return {
                //  展示得设备
                showDevice: {},
                noLockCount: 0,
                lockCount: 0,
                //定时执行的数量
                timeSize: 0,
                timeIndex: 0,
                //轮询设备分组
                showDeviceArray: {},
                //设备信息
                deviceInfo: [
                    {
                        deviceId: '1',
                        deviceName: '1',
                        isLock: false,
                        isShow: false
                    },
                    {
                        deviceId: '2',
                        deviceName: '2',
                        isLock: false,
                        isShow: false
                    },
                    {
                        deviceId: '3',
                        deviceName: '3',
                        isLock: false,
                        isShow: false
                    },
                    {
                        deviceId: '4',
                        deviceName: '4',
                        isLock: false,
                        isShow: false
                    },
                    {
                        deviceId: '5',
                        deviceName: '5',
                        isLock: false,
                        isShow: false
                    },
                ],
                cellCount: 4,  //默认从4开始
                cellCountArr: [
                    {
                        index: 1,
                        data: {
                            id: "213123",
                            name: "实打实打算"
                        },
                        isShow: false
                    },
                    {
                        index: 2,
                        data: {
                            id: "213123",
                            name: "实打实打算"
                        },
                        isShow: false
                    },
                    {
                        index: 3,
                        data: {
                            id: "213123",
                            name: "实打实打算"
                        },
                        isShow: false
                    },
                    {
                        index: 4,
                        data: {
                            id: "213123",
                            name: "实打实打算"
                        },
                        isShow: false
                    }, {
                        index: 5,
                        data: {
                            id: "213123",
                            name: "实打实打算"
                        },
                        isShow: false
                    },
                ],
                iconArr: [             //1 2 3 4 6 9 16宫格 icon 样式
                    {
                        number: 1,   //必须是int（number） 类型
                        name: 'el-icon-s-platform',
                        tips: '1画面'
                    },
                    {
                        number: 2,   //必须是int（number） 类型
                        name: 'el-icon-s-platform',
                        tips: '2画面'
                    },
                    {
                        number: 3,   //必须是int（number） 类型
                        name: 'el-icon-s-platform',
                        tips: '3画面'
                    },
                    {
                        number: 4,   //必须是int（number） 类型
                        name: 'el-icon-menu',
                        tips: '4画面'
                    },
                    {
                        number: 6,   //必须是int（number） 类型
                        name: 'el-icon-s-grid',
                        tips: '6画面'
                    },
                    {
                        number: 8,   //必须是int（number） 类型
                        name: 'el-icon-s-grid',
                        tips: '8画面'
                    },
                    {
                        number: 9,   //必须是int（number） 类型
                        name: 'el-icon-s-grid',
                        tips: '9画面'
                    },
                    {
                        number: 16,  //必须是int（number） 类型
                        name: 'el-icon-s-grid',
                        tips: '16画面'
                    },
                    {
                        number: 0,   //必须是int（number） 类型  根据业务需求
                        name: 'el-icon-delete',
                        tips: '删除所有视频'
                    },
                ],
            }
        },
        created() {
            this.init();
            //
            //
            setInterval(() => {
                this.updateCellCountArr()
                // this.showDeviceChange();
                // this.count++ // 每隔1秒自增计数器值
            }, 5000)
        },
        //监听设备展示数据变化
        watch: {
            // 'showDevice.1'(newVal) {
            //     console.log("属性已经改变", newVal);
            // },
        },
        mounted() {
            window.vue = this
        },
        methods: {
            //定时设备信息改变
            timeShowDeviceChange() {
            },
            // 点击事件
            cellCountFn(number) {
                this.cellCount = number
                this.cellCountArr.length = number
                this.init(number)
                // this.initShowDeviceArray(number);
            },
            //锁定某个设备
            lockDevice() {
            },
            cellCountFn1(i1) {
                if (i1.isLock) {
                    console.log(i1);
                    i1.isLock = false
                    let lockDevice = this.deviceInfo.filter(item => item.deviceId == i1.deviceId);
                    lockDevice[0].isLock = false
                } else {
                    i1.isLock = true;
                    let lockDevice = this.deviceInfo.filter(item => item.deviceId == i1.deviceId);
                    lockDevice[0].isLock = true
                }
            },
            updateCellCountArr() {
                if (this.cellCountArr.length>=this.deviceInfo.length){
                    return
                }

                //恢复设备可以播放
                // this.setIsShow();
                //获取可以改变的窗口
                let noLockCellCountArr = this.cellCountArr.filter(item => (item.data == null || item.data.isLock == false));
                // console.log(this.cellCountArr)
                //如果还有可用窗口
                const noLockCellCount = noLockCellCountArr.length
                if (noLockCellCount > 0) {
                    let unlockAndNoShowDevice1 = this.deviceInfo.filter(item => (item.isLock == false && item.isShow == false));
                    const unlockAndNoShowCount = unlockAndNoShowDevice1.length;
                    console.log("noLockCellCountArr",noLockCellCountArr)
                    console.log("unlockAndNoShowDevice1 ",unlockAndNoShowDevice1 )

                    //如果可用的窗口大于设备
                    if (unlockAndNoShowCount == 0) {
                        //如果没有设备展示
                        this.setIsShow();
                    }
                    if (unlockAndNoShowCount < noLockCellCount) {
                        noLockCellCountArr.forEach((value, index) => {
                            value.data=null;
                            let data= unlockAndNoShowDevice1[index]
                            if(data!=null){
                                unlockAndNoShowDevice1[index].isShow=true;
                                value.data=data;
                            }
                        });
                        this.setIsShow();
                    } else if (unlockAndNoShowCount > noLockCellCount ||  unlockAndNoShowCount == noLockCellCount) {
                        noLockCellCountArr.forEach((value, index) => {
                            value.data=null;
                            let data= unlockAndNoShowDevice1[index]
                            unlockAndNoShowDevice1[index].isShow=true;
                            value.data=data;
                        });
                        // value.data=null;
                        // let data= unlockAndNoShowDevice1[index]
                        // value.data=data
                        // unlockAndNoShowDevice1[index].isShow=true;
                    }
                    /*  //获取没有锁定且没有播放的数据
                      noLockCellCountArr.forEach(((value, index) => {
                          //先清空设备号
                          value.data = null;

                          //判断当前是否需要其他处理

                          let unlockDevice = unlockAndNoShowDevice1[index]
                          if (unlockDevice != null) {
                              unlockDevice.isShow = true;
                              value.data = unlockDevice;
                          }
                      }))*/
                }


             /*   //判断没有的补上
                let noLockCellCountArr1 = this.cellCountArr.filter(item => item.data == null);
                //获取设备
                let showCellCountArr1 = this.cellCountArr.filter(item => (item.data != null && item.data.isLock != true));
                //已存在窗口上 但是没有锁定的设备
                let cellCountMap = {}
                showCellCountArr1.forEach(((value, index) => {
                    cellCountMap[value.deviceId] = "";
                }))
*/
                /*   if (noLockCellCountArr1.length > 0) {
                       let unlockAndNoShowDevice2 = this.deviceInfo.filter(item => (item.isLock == false && item.isShow == false));
                       if (unlockAndNoShowDevice2.length <= 0) {
                           let unlockAndNoShowDevice =  this.setIsShow(cellCountMap)
                           noLockCellCountArr1.forEach(((value, index) => {
                               value=unlockAndNoShowDevice[index]
                               unlockAndNoShowDevice[index].isShow=true
                           }))
                       }
                   }*/
            },
            //恢复设备可以播放
            setIsShow(cellCountMap) {
                /* if (cellCountMap != null) {
                     let unlockAndNoShowDevice = this.deviceInfo.filter(item =>{
                         if (item.isLock == false  ){
                             if (cellCountMap[item.deviceId] ==null){
                                 return true
                             }else{
                                 return false
                             }
                         }
                         return false
                     });
                     return unlockAndNoShowDevice
                 } else {*/
                //如果没有可播放的设备，先把isShow打开
                let unlockAndNoShowDevice = this.deviceInfo.filter(item => (item.isLock == false && item.isShow == false));
                if (unlockAndNoShowDevice.length == 0) {
                    let updateDevice = this.deviceInfo.filter(item => (item.isLock == false && item.isShow == true));
                    updateDevice.forEach((value, index) => {
                        value.isShow = false;
                    })
                }
                // }
            },

            //初始化设备
            init(number) {
                //初始化设备状态
                this.deviceInfo.forEach((value,index)=>{
                    value.isLock=false;
                    value.isShow=false;

                })



                let cellCountArr = [];
                console.log("111111111111111111")
                for (let i = 0; i < number; i++) {
                    if ((i + 1) <= number) {
                        let deviceInfo = {
                            index: 1,
                            data: {},
                            isShow: false
                        }
                        deviceInfo['index'] = i
                        const data = this.deviceInfo[i]
                        //设置这个数据已经轮播过
                        if (data!=null){
                            //改变设备里面的 状态 变成已播放过
                            deviceInfo.data = data;
                            data.isShow = true
                            console.log(data)
                        }
                        cellCountArr.push(deviceInfo)
                    }
                }
                this.cellCountArr = cellCountArr

                // console.log("this.cellCountArr", this.cellCountArr)

                // eslint-disable-next-line no-unused-vars
                /*   const deviceLength = Object.keys(this.deviceInfo).length;
                   let size = 0;
                   if (deviceLength == 1) {
                       size = deviceLength / 1;
                       this.cellCount = 1;
                       this.cellCountArr.length = 1
                   } else if ((deviceLength / 4) < 1) {
                       size = Math.round(deviceLength / 4.0);
                       this.cellCount = 4;
                       this.cellCountArr.length = 4
                   } else if ((deviceLength / 9) < 1) {
                       size = Math.round(deviceLength / 9.0);
                       this.cellCount = 9;
                       this.cellCountArr.length = 9
                   } else if ((deviceLength / 16) < 1) {
                       this.cellCount = 16;
                       size = Math.round(deviceLength / 16);
                       this.cellCountArr.length = 16
                   } else {
                       this.cellCount = 16;
                       size = Math.round(deviceLength / 16);
                       this.cellCountArr.length = 16
                   }


                   console.log(size)
                   this.initShowDeviceArray(size)
   */
                //取消所有设备的锁定
                // this.unLockDeviceInfo();
                //初始化显示设备信息
                //制定设备分组分组信息
                // this.initShowDeviceChange();

                /*        console.log(this.showDevice)
                        //绑定监听事件，用于获取变化的key
                       const watchCount =  Object.keys(this.showDevice).length;
                        for (let i=0;i<watchCount;i++){
                            this.$watch('showDevice.'+i, (oldValue, newValue) => {
                                console.log(`name属性从${oldValue}变为了${newValue}`);
                            });
                        }*/
            },
            //取消所有设备的锁定
            unLockDeviceInfo() {
                for (let key in this.deviceInfo) {
                    this.deviceInfo[key].isLock = false;
                }
            },
        }, computed: {
            // 计算类样式属性
            cellClass() {
                return function (index) {
                    switch (this.cellCount) {
                        case 1:
                            return ['player-w1']
                        case 2:
                            return ['player-w2']
                        case 3:
                            if (index == 0)
                                return ['player-w3-1']
                            return ['player-w3-2']
                        case 4:
                            return ['player-w4']
                        case 6:
                            if (index == 0)
                                return ['player-w6-1']
                            return ['player-w6-2']
                        case 8:
                            if (index == 0)
                                return ['player-w8-1']
                            return ['player-w8-2']
                        case 9:
                            return ['player-9']
                        case 16:
                            return ['player-16']
                        default:
                            break;
                    }
                }
            }
        },
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .cell {
        display: flex;
        flex-direction: column;
        height: 200px
    }

    .cell-tool {
        height: 40px;
        line-height: 30px;
        padding: 0 7px;
    }

    .player {
        height: 200px;
    }

    .player-w1 {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .player-w2 {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        float: left;
    }

    .player-w3-1 {
        width: 100%;
        height: 50%;
        box-sizing: border-box;
        float: left;
    }

    .player-w3-2 {
        width: 50%;
        height: 50%;
        box-sizing: border-box;
        float: left;
    }

    .player-w4 {
        width: 50%;
        height: 50% !important;
        box-sizing: border-box; /**可有可无 */
        float: left;
    }

    .player-w6-1 {
        width: 66.66%;
        height: 65.66% !important; /*这里小一点 注意点 */
        box-sizing: border-box;
        float: left;
    }

    .player-w6-2 {
        width: 33.33%;
        height: 33.33% !important;
        box-sizing: border-box;
        display: inline-table; /**可有可无 */
        float: left;
    }

    .player-w8-1 {
        width: 75%;
        height: 74% !important;
        box-sizing: border-box;
        float: left;
    }

    .player-w8-2 {
        width: 25%;
        height: 25% !important;
        box-sizing: border-box;
        display: inline-table; /**可有可无 */
        float: left;
    }

    .player-9 {
        width: 33.33%;
        height: 33.33% !important;
        box-sizing: border-box;
        float: left;
    }

    .player-16 {
        width: 25%;
        height: 25% !important;
        box-sizing: border-box;
        float: left;
    }
</style>
